<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>风行融媒体 - 登录</title>
  <!-- 资源路径修复脚本 - 必须最先加载 -->
  <script>require('./utils/asset-fix.js');</script>
  <link rel="stylesheet" href="./styles/background.css">
  <link rel="stylesheet" href="./styles/titlebar.css">
  <link rel="stylesheet" href="./styles/login.css?v=19">
</head>
<body class="login-page">
  <!-- 自定义标题栏 -->
  <div class="custom-titlebar">
    <div class="titlebar-left">
      <div class="titlebar-avatar">
        <img id="titlebarAvatarImg" src="./assets/avatar.png" alt="用户头像">
      </div>
      <div class="titlebar-title" id="titlebarTitle">登录</div>
    </div>
    <div class="titlebar-right">
      <div class="titlebar-controls">
        <button class="titlebar-btn cloud-sync" id="titlebarCloudSync" title="云同步">
          <svg t="1761036139862" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5278" width="19" height="19"><path d="M806.7072 470.528A290.816 290.816 0 0 0 252.16 371.4048a217.5488 217.5488 0 0 0-9.8304 428.1344 149.1456 149.1456 0 0 0 37.0176 4.352h504.4224a167.8336 167.8336 0 0 0 167.7824-167.7824c1.0752-82.7904-62.1056-154.6752-144.896-165.5808z m-44.6464 44.6464a26.2656 26.2656 0 0 0 19.6096 7.6288h4.352a113.3056 113.3056 0 0 1 0 226.6112H280.5248a114.3808 114.3808 0 0 1-26.1632-3.2768 164.1984 164.1984 0 0 1 19.6096-324.6592 27.3408 27.3408 0 0 0 22.9888-17.408 237.3632 237.3632 0 0 1 458.6496 84.992v3.2768c-1.0752 10.9056 1.0752 17.408 6.5536 22.8864z" p-id="5279" fill="#515151"></path><path d="M489.6768 557.6704a23.1936 23.1936 0 0 0-30.72 0l-27.2384 27.2384V458.5472a21.8112 21.8112 0 1 0-43.5712 0v126.3616l-27.2384-27.2384a23.1936 23.1936 0 0 0-30.72 0 21.0432 21.0432 0 0 0 0 30.72l64.256 64.256c1.0752 1.0752 2.2016 1.0752 3.2768 2.2016s2.2016 1.0752 3.2768 2.2016c1.0752 0 2.2016 1.0752 3.2768 1.0752h10.9056c1.0752 0 2.2016-1.0752 3.2768-1.0752a22.784 22.784 0 0 0 6.5536-4.352l64.256-64.256a21.0432 21.0432 0 0 0 0-30.72zM670.72 508.672l-64.4608-64.3072-1.0752-1.0752c-1.0752 0-1.0752-1.0752-2.2016-1.0752s-1.0752-1.0752-2.2016-1.0752-1.0752-1.0752-2.2016-1.0752-1.0752 0-2.2016-1.0752h-13.056c-1.0752 0-1.0752 0-2.2016 1.0752a1.0752 1.0752 0 0 0-1.0752 1.0752c-1.0752 0-1.0752 1.0752-2.2016 1.0752l-1.0752 1.0752c-1.0752 0-1.0752 1.0752-2.2016 1.0752L510.3616 508.672a21.5552 21.5552 0 0 0 30.72 30.72L568.32 512v126.3616a21.8112 21.8112 0 0 0 43.5712 0V512l27.2384 27.2384a21.0432 21.0432 0 0 0 30.72 0 20.48 20.48 0 0 0 1.0752-30.72z" p-id="5280" fill="#515151"></path></svg>
        </button>
        <button class="titlebar-btn minimize" id="titlebarMinimize" title="最小化">
          <span>─</span>
        </button>
        <button class="titlebar-btn maximize" id="titlebarMaximize" title="最大化">
          <span>□</span>
        </button>
        <button class="titlebar-btn close" id="titlebarClose" title="关闭">
          <span>✕</span>
        </button>
      </div>
    </div>
  </div>
  
  <!-- 白色模块 -->
  <div class="white-module"></div>
  
  <!-- P1图片 -->
  <img src="./assets/P1.png" alt="Logo" class="p1-image">
  
  <!-- P2图片 -->
  <img src="./assets/P2.png" alt="Illustration" class="p2-image">
  
  <!-- 协作效率高文字 -->
  <div class="collaboration-text">协作效率高</div>
  
  <!-- Community discussion文字 -->
  <div class="community-text">Community discussion</div>
  
  <!-- P3图片 -->
  <img src="./assets/P3.png" alt="Icon 1" class="p3-image">
  
  <!-- P4图片 -->
  <img src="./assets/P4.png" alt="Icon 2" class="p4-image">
  
  <!-- P5图片 -->
  <img src="./assets/P5.png" alt="Icon 3" class="p5-image">
  
  <div class="login-container">
    <div class="welcome-text">欢迎 回来</div>
    
    <div class="error-message" id="errorMessage"></div>

    <form id="loginForm">
      <div class="form-group">
        <div class="input-wrapper">
          <span class="input-icon">
            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
              <path d="M672 320a160 160 0 1 0-160 160 160 160 0 0 0 160-160z m64 0A224 224 0 1 1 512 96a224 224 0 0 1 224 224z" fill="#8a8a8a"></path>
              <path d="M224 832a32 32 0 0 1-64 0 352 352 0 0 1 704 0 32 32 0 0 1-64 0 288 288 0 0 0-576 0z" fill="#8a8a8a"></path>
            </svg>
          </span>
          <input type="text" id="username" name="username" placeholder="请输入内容" required autofocus>
        </div>
      </div>

      <div class="form-group">
        <div class="input-wrapper">
          <span class="input-icon">
            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
              <path d="M288 384v-74.666667c0-123.722667 100.266667-224 224-224s224 100.224 224 224v74.666667h10.677333C811.445333 384 864 436.597333 864 501.333333v320c0 64.821333-52.469333 117.333333-117.322667 117.333334H277.333333C212.554667 938.666667 160 886.069333 160 821.333333V501.333333c0-64.821333 52.469333-117.333333 117.322667-117.333333H288z m64 0h320v-74.666667c0-88.426667-71.605333-160-160-160-88.384 0-160 71.626667-160 160v74.666667zM224 501.333333v320c0 29.397333 23.914667 53.333333 53.322667 53.333334H746.666667A53.269333 53.269333 0 0 0 800 821.333333V501.333333c0-29.397333-23.914667-53.333333-53.322667-53.333333H277.333333A53.269333 53.269333 0 0 0 224 501.333333z" fill="#8a8a8a"></path>
            </svg>
          </span>
          <input type="password" id="password" name="password" placeholder="请输入密码" required>
        </div>
      </div>

      <button type="submit" class="btn-login" id="loginBtn">
        登录
      </button>
    </form>
    
    <!-- 其他登录方式 -->
    <div class="login-methods">
      <div class="method-item">
        <div class="method-icon" id="qrcode-icon">
          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
            <path d="M693.333333 170.666667a32 32 0 0 1 0-64h149.333334a74.666667 74.666667 0 0 1 74.666666 74.666666v149.333334a32 32 0 0 1-64 0V181.333333a10.666667 10.666667 0 0 0-10.666666-10.666666H693.333333z m160 522.666666a32 32 0 0 1 64 0v149.333334a74.666667 74.666667 0 0 1-74.666666 74.666666H693.333333a32 32 0 0 1 0-64h149.333334a10.666667 10.666667 0 0 0 10.666666-10.666666V693.333333zM330.666667 853.333333a32 32 0 0 1 0 64H181.333333a74.666667 74.666667 0 0 1-74.666666-74.666666V693.333333a32 32 0 0 1 64 0v149.333334a10.666667 10.666667 0 0 0 10.666666 10.666666h149.333334zM170.666667 330.666667a32 32 0 0 1-64 0V181.333333a74.666667 74.666667 0 0 1 74.666666-74.666666h149.333334a32 32 0 0 1 0 64H181.333333a10.666667 10.666667 0 0 0-10.666666 10.666666v149.333334z m629.333333 149.333333a32 32 0 0 1 0 64H224a32 32 0 0 1 0-64h576z" fill="#5695FF"></path>
          </svg>
        </div>
        <span class="method-text">扫二维码</span>
      </div>
      
      <div class="method-item">
        <div class="method-icon" id="email-icon">
          <svg viewBox="0 0 1040 1024" xmlns="http://www.w3.org/2000/svg">
            <path d="M818.97651 64.224744 204.713428 64.224744c-113.073288 0-204.714452 93.713358-204.714452 209.238488l0 413.642878c0 115.52513 91.641163 208.357422 204.714452 208.357422l614.262058 0c113.134687 0 204.771757-92.833315 204.771757-208.357422L1023.747243 273.463232C1023.748267 157.939125 932.110173 64.224744 818.97651 64.224744zM709.783599 482.420311l249.786996-150.083204 0 296.587905L709.783599 482.420311zM204.713428 128.026862l614.262058 0c72.988338 0 133.375683 58.618049 139.984195 132.059712L511.875157 528.771989 64.50206 259.912611C71.221088 186.55179 131.840724 128.026862 204.713428 128.026862zM63.87375 332.154959l250.091942 150.266375L63.87375 629.103068 63.87375 332.154959zM818.97651 831.417867 204.713428 831.417867c-72.79391 0-133.36238-57.398268-140.190903-130.530892l309.642223-181.605128c0.189312-0.11461 0.370437-0.23843 0.555655-0.356111l121.31295 72.890101c4.840238 2.889817 10.308787 4.397147 15.84078 4.397147 5.529947 0 10.997472-1.50733 15.838733-4.397147l121.314996-72.891124c0.186242 0.118704 0.367367 0.242524 0.557702 0.357134l309.352627 181.435259C952.219163 773.930571 891.884007 831.417867 818.97651 831.417867z" fill="#5695FF"></path>
          </svg>
        </div>
        <span class="method-text">邮箱登录</span>
      </div>
      
      <div class="method-item">
        <div class="method-icon" id="oa-icon">
          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
            <path d="M838.4 185.6H608v57.6h236.8c32 0 57.6 25.6 57.6 57.6v409.6c0 32-25.6 57.6-57.6 57.6H608v57.6h236.8c64 0 121.6-51.2 121.6-121.6V307.2c-6.4-64-57.6-121.6-128-121.6z m-332.8-83.2h-19.2l-339.2 64C102.4 179.2 64 217.6 64 268.8v480c0 44.8 38.4 89.6 83.2 102.4l339.2 70.4h19.2c51.2 0 89.6-38.4 89.6-89.6V192c-6.4-51.2-44.8-89.6-89.6-89.6zM531.2 832c0 19.2-12.8 25.6-25.6 25.6h-6.4L160 787.2c-19.2 0-32-19.2-32-38.4v-480c0-19.2 12.8-38.4 32-38.4l339.2-64h6.4c12.8 0 25.6 12.8 25.6 25.6v640z" fill="#5695FF"></path>
            <path d="M832 473.6H608v64h224c19.2 0 32-12.8 32-32s-12.8-32-32-32z m0 153.6H608v64h224c19.2 0 32-12.8 32-32s-12.8-32-32-32zM864 352c0-19.2-12.8-32-32-32H608v64h224c19.2 0 32-12.8 32-32zM339.2 454.4c-51.2 0-96-51.2-96-108.8s44.8-108.8 96-108.8 96 51.2 96 108.8-38.4 108.8-96 108.8z m0-153.6c-19.2 0-32 19.2-32 44.8s12.8 44.8 32 44.8 32-19.2 32-44.8-12.8-44.8-32-44.8zM364.8 492.8H288L166.4 755.2h70.4l32-64H384l51.2 115.2h70.4L364.8 492.8z m-64 134.4l25.6-57.6 25.6 57.6h-51.2z" fill="#5695FF"></path>
          </svg>
        </div>
        <span class="method-text">OA账号登录</span>
      </div>
    </div>

    <!-- 其他登录方式视图 -->
    <div class="alternative-login-view" id="alternativeView" style="display: none;">
      <img src="./assets/P666.png" alt="登录方式" class="login-method-image">
      <div class="not-activated-text">000 Not activated</div>
      <div class="not-activated-desc">抱歉，该登录方式暂未开通</div>
      <button class="btn-back" id="backBtn">返回账户密码登录</button>
    </div>
  </div>

  <script>
    const { ipcRenderer } = require('electron');

    const loginForm = document.getElementById('loginForm');
    const loginBtn = document.getElementById('loginBtn');
    const errorMessage = document.getElementById('errorMessage');
    const welcomeText = document.querySelector('.welcome-text');
    const loginMethods = document.querySelector('.login-methods');
    const alternativeView = document.getElementById('alternativeView');
    const backBtn = document.getElementById('backBtn');
    const methodItems = document.querySelectorAll('.method-item');

    // 切换到其他登录方式
    function showAlternativeLogin() {
      welcomeText.style.display = 'none';
      loginForm.style.display = 'none';
      loginMethods.style.display = 'none';
      alternativeView.style.display = 'flex';
    }

    // 返回账户密码登录
    function showPasswordLogin() {
      welcomeText.style.display = 'block';
      loginForm.style.display = 'block';
      loginMethods.style.display = 'flex';
      alternativeView.style.display = 'none';
    }

    methodItems.forEach(item => {
      item.addEventListener('click', showAlternativeLogin);
    });

    // 监听返回按钮点击
    backBtn.addEventListener('click', showPasswordLogin);

    const errorMsg = document.getElementById('errorMessage');

    function showError(message) {
      errorMsg.textContent = message;
      errorMsg.style.display = 'block';
      
      setTimeout(() => {
        errorMsg.style.display = 'none';
      }, 5000);
    }

    // 全局通知函数，供主进程调用
    window.showNotification = function(message, type = 'info') {
      if (type === 'warning' || type === 'error') {
        showError(message);
      } else {
        showError(message);
      }
    };

    // 监听登录表单提交
    loginForm.addEventListener('submit', async (e) => {
      e.preventDefault();

      const username = document.getElementById('username').value.trim();
      const password = document.getElementById('password').value;

      if (!username || !password) {
        showError('请输入用户名和密码');
        return;
      }

      // 禁用按钮并显示加载状态
      loginBtn.disabled = true;
      loginBtn.innerHTML = '<span class="loading-spinner"></span>登录中...';

      try {
        const result = await ipcRenderer.invoke('login', { username, password });

        if (result.success) {
          // 登录成功，加载主界面（新架构）
          window.location.href = './base.html';
        } else {
          showError(result.message || '登录失败，请检查用户名和密码');
        }
      } catch (error) {
        showError('登录失败: ' + error.message);
      } finally {
        loginBtn.disabled = false;
        loginBtn.textContent = '登录';
      }
    });
  </script>
  <script src="./scripts/titlebar.js"></script>
</body>
</html>
